css中transform translate元素居中
转载:css中的“ transform: translate(-50%, -50%); “的意思_transform: translatex(-50%);-CSDN博客
这种特定的用法(translate(-50%, -50%))
经常和 position: absolute; top: 50%; left: 50%;
一起使用,用于将元素居中。
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这里的原理是,首先通过 top: 50%; left: 50%;
将元素的左上角移到其容器的中心,然后再通过 translate(-50%, -50%)
向左和向上移动元素的一半宽度和一半高度,以此达到完全居中的效果。